<template>
  <div class="box-show">
    <div class="z gonggao">
      <el-page-header
        style="color: #999999"
        @back="$router.back(-1)"
        content="新增商品"
      >
      </el-page-header>
      <div style="height: 20px"></div>
    </div>
    <div class="shuju">
      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本" name="first" style="text-align: left">
            <el-row>
              <el-col :span="12">
                <el-form-item label="排序">
                  <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="商品名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                  <el-input
                    v-model="form.unit"
                    placeholder="单位 如：个/件/包"
                  ></el-input>
                </el-form-item>
                <el-form-item label="主图" prop="img" style="text-align: left;">
                  <el-upload
                    class="avatar-uploader"
                    action="/addons/up_depot/inc/web/public/Memory/uploadfile"
                    name="image"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    accept=".jpg, .jpeg, .png, .gif"
                  >
                    <img
                      v-if="imgIsNull"
                      :src="fileUrl + form.img"
                      class="avatar"
                      style="height: 100px;width: 100px;border-radius: 5px"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item
                  label="详情主图"
                  prop="img"
                  style="text-align: left;"
                >
                  <el-upload
                    class="avatar-uploader"
                    action="/addons/up_depot/inc/web/public/Memory/uploadfile"
                    name="image"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    accept=".jpg, .jpeg, .png, .gif"
                  >
                    <img
                      v-if="imgIsNull"
                      :src="fileUrl + form.img"
                      class="avatar"
                      style="height: 100px;width: 100px;border-radius: 5px"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="商品简介">
                  <el-input type="textarea" v-model="form.introduce"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="库存/规格" name="second">
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="6">
                    <el-form-item
                      label="多规格"
                      style="text-align: left"
                      size="mini"
                    >
                      <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="编码">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="条码">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="成本价">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="原价">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="现价">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="商品简介">
                <div
                  class="guige"
                  @mouseenter="seen = true"
                  @mouseleave="seen = false"
                >
                  <el-row>
                    <el-col :span="6">
                      <el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input>
                    </el-col>
                    <el-col :span="18" style="text-align: right">
                      <i v-if="seen" class="el-icon-error close-ico"></i>
                    </el-col>
                  </el-row>
                  <el-row class="er-sku-z">
                    <div class="leftAndBottom"></div>
                    <div class="er-sku">
                      <el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input>
                      <el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input>
                      <el-button
                        type="text"
                        size="mini"
                        @click="add(node, data)"
                      >
                        添加子分类
                      </el-button>
                    </div>
                  </el-row>
                </div>
                <div
                  class="guige"
                  @mouseenter="seen = true"
                  @mouseleave="seen = false"
                >
                  <el-row>
                    <el-col :span="6">
                      <el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input>
                    </el-col>
                    <el-col :span="18" style="text-align: right">
                      <i v-if="seen" class="el-icon-error close-ico"></i>
                    </el-col>
                  </el-row>
                  <el-row class="er-sku-z">
                    <div class="leftAndBottom"></div>
                    <div class="er-sku">
                      <el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input>
                      <el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input
                      ><el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input
                      ><el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input
                      ><el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input
                      ><el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input
                      ><el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input>
                      <el-input
                        v-model="form.user"
                        maxlength="10"
                        show-word-limit
                      ></el-input>
                      <el-button
                        type="text"
                        size="mini"
                        @click="add(node, data)"
                      >
                        添加子分类
                      </el-button>
                    </div>
                  </el-row>
                </div>
                <div style="text-align: left">
                  <el-button type="primary" @click="classify_save('form')"
                    ><i class="el-icon-plus"></i>添加规格</el-button
                  >
                </div>
                <div>
                  <!--表格-->
                  <AntSku :natures="natures" :skus="skus"></AntSku>
                </div>
              </el-form-item>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="参数" name="third">
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="参数名称">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="参数值">
                      <el-input v-model="form.user"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item style="text-align: left">
                  <el-button @click="classify_save('form')" type="primary">
                    <i class="el-icon-plus"></i>新增参数</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </div>
</template>

<script>
import AntSku from "@/components/ant-sku/ant-sku";
import { memory_uploadfile } from "@/utils/do";
export default {
  name: "add",
  props: {},
  data() {
    return {
      activeName: "first",
      imgIsNull: "",
      seen: false,
      headers: { uniacid: 2 },
      form: {
        name: "",
        en_name: "",
        contacts_name: "", // 分组的ID
        phone: "" // 仓库的唯一ID
      },
      // 规格
      skus: [
        {
          id: 1,
          seen: false,
          value: "颜色",
          leaf: [
            { id: 11, value: "红色" },
            { id: 12, value: "蓝色" }
          ]
        },
        {
          id: 2,
          seen: false,
          value: "尺寸",
          leaf: [
            { id: 21, value: "大" },
            { id: 22, value: "中" },
            { id: 23, value: "小" }
          ]
        },
        {
          id: 2,
          seen: false,
          value: "套餐",
          leaf: [
            { id: 31, value: "官方标配" },
            { id: 32, value: "随机赠送" }
          ]
        }
      ],
      natures: [
        "图片",
        "售卖价格(元)",
        "划线价格(元)",
        "成本价(元)",
        "库存(件)",
        "编码重量(千克)",
        "体积(m³)"
      ]
    };
  },
  components: {
    // 第三方组件实例化
    AntSku
  },
  computed: {},
  methods: {
    // 方法
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      let _ = this;
      memory_uploadfile(file, res => {
        console.log(res);
        _.form.img = res.date;
        _.imgIsNull = true;
        _.$forceUpdate();
        console.log(_.fileUrl + _.form.img);
      });
      return false;
    }
  },
  mounted() {}
};
</script>

<style scoped>
@import "~@/assets/scss/index.css";
</style>
